<!-- subpkg_archive/form/index.vue -->
<script setup>
	import { ref } from 'vue'
	import { addPatientAPI, getPatientDetailAPI, updatePatientAPI } from '@/apis/user.js'
	import { onLoad } from '@dcloudio/uni-app'
	const isDefault = ref([0])
	const formData = ref({
		name: '',
		idCard: '',
		defaultFlag: 1,
		gender: 1
	})

	const form = ref(null)

	const onSwitchChange = (e) => {
		// console.log(e.detail.value)
		// 后端需要的数据是1是默认选中 0 不是默认选中 得到的是true和return false;
		formData.value.defaultFlag = e.detail.value ? 1 : 0
	}

	const rules = {
		name: {
			rules: [
				{ required: true, errorMessage: '请填写患者姓名' },
				{
					pattern: '^[\u4e00-\u9fa5]{2,5}$',
					errorMessage: '患者姓名为2-5位中文'
				}
			]
		},
		idCard: {
			rules: [
				{ required: true, errorMessage: '请输入身份证号' },
				{
					pattern:
						'^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
					errorMessage: '身份证号格式不正确'
				}
			]
		},
		gender: {
			rules: [
				{ required: true, errorMessage: '请勾选患者姓名' },
				{
					validateFunction(rule, value, data, callback) {
						const num = data.idCard.slice(-2, -1) % 2 // 得到0|1
						if (num !== value) {
							callback('选择的性别和身份证上面的性别不符合')
						}
						return true
						// 获取身份证号码的倒数第二位
						// console.log()
					}
				}
			]
		}
	}
	// 表单提交时
	const onSubmt = async () => {
		try {
			await form.value.validate()
			// 调用接口 发送请求
			query.id
				? await updatePatientAPI(formData.value)
				: await addPatientAPI(formData.value)
			uni.showToast({
				icon: 'success',
				title: query.id ? '编辑患者成功' : '添加患者成功'
			})
			uni.redirectTo({
				url: '/subpkg_archive/list/index'
			})
			// 添加患者成功后 跳转到 上一页
			// uni.navigateBack()
		} catch (e) {
			//TODO handle the exception
			console.log(e)
		}
	}

	// 获取查询参数
	const query = defineProps()
	// console.log(query)
	// 修改标题
	uni.setNavigationBarTitle({
		title: query.id ? '编辑患者' : '添加患者'
	})

	// 定义函数获取患者详情
	const getPatientDetail = async () => {
		// 判断是否有query.id
		if (query.id) {
			uni.showLoading({
				title: '正在加载中....'
			})
			const res = await getPatientDetailAPI(query.id)
			// console.log(res)
			const { id, gender, idCard, name, defaultFlag } = res.data
			formData.value = { id, gender, idCard, name, defaultFlag }
			uni.hideLoading()
		}
	}

	onLoad(() => {
		getPatientDetail()
	})
</script>

<template>
	<scroll-page>
		<view class="archive-page">
			<uni-forms
				border
				label-width="220rpx"
				ref="form"
				:model="formData"
				:rules="rules"
			>
				<uni-forms-item label="患者姓名" name="name">
					<uni-easyinput
						placeholder-style="color: #C3C3C5; font-size: 32rpx"
						:styles="{ color: '#121826' }"
						v-model="formData.name"
						:input-border="false"
						:clearable="false"
						placeholder="请填写真实姓名"
					/>
				</uni-forms-item>
				<uni-forms-item label="患者身份证号" name="idCard">
					<uni-easyinput
						placeholder-style="color: #C3C3C5; font-size: 32rpx"
						:styles="{ color: '#121826' }"
						:input-border="false"
						:clearable="false"
						placeholder="请填写身份证号"
						v-model="formData.idCard"
					/>
				</uni-forms-item>
				<uni-forms-item label="患者性别" name="gender">
					<uni-data-checkbox
						selectedColor="#16C2A3"
						v-model="formData.gender"
						:localdata="[
							{ text: '男', value: 1 },
							{ text: '女', value: 0 }
						]"
					/>
				</uni-forms-item>
				<uni-forms-item label="默认就诊人" name="name">
					<view class="uni-switch">
						<switch
							:checked="formData.defaultFlag === 1"
							color="#20c6b2"
							style="transform: scale(0.7)"
							@change="onSwitchChange"
						/>
					</view>
				</uni-forms-item>
				<button class="uni-button" @click="onSubmt">保存</button>
			</uni-forms>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
